<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .card {
        background-color: bisque;
        height: 100px;
        width : 200px;
        margin-bottom: 10px;
        padding: 10px;
    }
    </style>
</head>
<body>
    <div id="app">  
        <div v-pin:true.bottom.right = "card1.pined" class="card">
            <button @click="card1.pined = !card1.pined">T</button>
            whh
        </div>  
        <div v-pin = "card2.pined" class="card">
                <a @click="card2.pined = !card2.pined">pin it</a>
            lsd
        </div> 
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum at vero qui itaque, numquam esse excepturi modi laborum quibusdam natus iste cupiditate quisquam, aliquam similique! Atque laboriosam id accusantium maxime?
        Obcaecati et accusantium veniam quod. Suscipit iusto fugit non culpa aliquid quod praesentium illo delectus deleniti autem? Vitae reprehenderit porro, distinctio deleniti ipsum doloremque nemo exercitationem natus voluptatum excepturi delectus?
        Ex asperiores, voluptatibus, reiciendis modi, ea dolor fugiat recusandae cumque doloribus id autem obcaecati accusantium. Amet, ex libero! Veritatis dicta quas quidem vero sapiente id reprehenderit ducimus ut odit placeat.
        Ratione doloremque blanditiis voluptas molestias facere ducimus porro, rem, non aut, cumque nemo omnis officiis! Enim quis quidem dolor! Quas in beatae accusantium. Id obcaecati quisquam sint alias necessitatibus velit!
        Ipsa, praesentium. Voluptatibus quas alias, incidunt nisi, necessitatibus unde dolores non totam tenetur aut minima id cumque et molestiae error, magnam ab consequuntur cupiditate facilis eligendi asperiores porro quisquam exercitationem.  
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti expedita rerum repellat nobis natus temporibus reiciendis deserunt nulla! Ipsam magni suscipit iusto nihil. Perspiciatis quis sed eligendi! Dignissimos, excepturi praesentium!
        Obcaecati, alias at. Distinctio adipisci mollitia eaque fugiat consequatur necessitatibus inventore animi error reprehenderit quia, ipsam sunt, cumque voluptatum magnam corporis deleniti placeat. Labore iure quia debitis, error et exercitationem!
        Deserunt perspiciatis dolorum culpa vel, ea perferendis, velit laudantium accusamus sapiente possimus inventore nihil eius nam. Incidunt amet molestiae, sed quis illum dolorum quaerat, tempore praesentium quasi cupiditate eligendi laboriosam.
        Odit iure dolores maxime saepe vel nam voluptas dolor unde laboriosam repellat. Voluptas quaerat, pariatur reprehenderit inventore modi provident vel fugit quod fuga, nisi, magnam minima nesciunt sunt voluptatem suscipit.
        Aperiam vel ipsam nemo, recusandae possimus voluptatibus nihil, id ratione totam, quam eos et voluptates repellendus? Quod numquam distinctio, non tempore atque, quibusdam consectetur saepe incidunt sapiente fugiat ex voluptatem.
        Ipsum rerum sapiente dignissimos fugiat autem magnam numquam, sed laborum qui voluptates. Vitae quibusdam vero aperiam mollitia, magnam aliquam, minima architecto officiis ratione dolores, nihil deserunt velit quam magni corporis.
        Nulla corporis placeat officiis, vero architecto, nisi quo, deserunt dolorem libero ea beatae perspiciatis eaque. Adipisci vero natus velit, explicabo ab nemo. Nam expedita tempora nisi distinctio harum. Est, aspernatur?
        Corrupti, sed? Optio id, molestiae quidem suscipit at vero laudantium, provident ex dolore quae consequatur iusto. Aliquam natus doloribus in molestias necessitatibus dicta, eaque explicabo reprehenderit odit. Illo, nemo hic!
        Adipisci ducimus tenetur minima amet labore non, dolores quos neque, perferendis animi cupiditate illo natus, deserunt ab modi vel iusto iste consequuntur temporibus tempora excepturi ipsam commodi. Aspernatur, suscipit ducimus!
        Tempora, praesentium temporibus odit ab sunt libero optio dolorum magnam, aut amet architecto fugit. Iure veniam aut atque accusamus suscipit id, ad vitae voluptatum nisi praesentium? At id eos expedita.
        Reiciendis, excepturi id nesciunt numquam placeat cumque a quaerat ducimus odit. Ipsa praesentium harum voluptatem illum. Vero totam et porro ut saepe quae enim libero beatae nesciunt nobis, laudantium alias.
        Nobis autem nam earum nulla ullam et totam, minus odio at ducimus quis excepturi repellendus accusantium, eligendi inventore possimus assumenda illo obcaecati. Nesciunt rerum optio tempore ducimus voluptatibus aliquam quisquam!
        Officiis, velit! Rem, consequatur esse veniam eligendi aut sed quibusdam blanditiis ut hic illum unde saepe. Dolores, tempora saepe, quasi maiores ipsa officia temporibus eos eligendi deserunt consectetur nulla enim.
        Eveniet non nisi nihil vel aperiam earum. Architecto id maiores quaerat nulla iusto qui veniam repellendus eveniet pariatur quas debitis deserunt, sed veritatis blanditiis porro commodi itaque corporis magni nobis!
        Accusamus voluptates commodi enim, id unde eveniet, doloremque a dignissimos magni inventore quia adipisci voluptate possimus provident dolorum asperiores, nesciunt iure repudiandae exercitationem voluptatibus quam libero fuga consequatur? Porro, corrupti.
        Minima voluptatibus consequuntur excepturi explicabo fugiat nobis praesentium, unde quod ipsum soluta quam est. Inventore aperiam, harum quasi perferendis deserunt quas quos, beatae iste consectetur quidem quod possimus deleniti magni.
        Autem aliquid nesciunt cupiditate! Blanditiis quidem autem perspiciatis voluptatibus voluptates possimus laboriosam mollitia magnam numquam ratione alias molestias nisi fugit aliquid ipsa quis omnis sequi, consequatur earum. Cumque, excepturi maxime.
        Corrupti illo provident ullam consequatur, sapiente dolor omnis quas nulla illum error voluptate ipsum perspiciatis odit saepe labore, optio eum? Dolore voluptas consectetur in maxime amet aspernatur quas totam eius.
        Aliquid ex deserunt, harum maxime a at quibusdam laborum! Odit, earum cupiditate magni hic, voluptatum dolorem beatae natus, velit non veniam ea ut doloremque. Harum atque accusantium sapiente quaerat aspernatur?
        Praesentium minus repellat, commodi totam maiores error, architecto obcaecati rem porro corrupti repellendus quo cupiditate labore doloribus exercitationem. Vel ullam ipsum accusantium, dolore quae consectetur minus impedit harum similique tempore.
    </div>
</body>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>

</html>